<template>
  <div>
    <div class="course-video-body">
      <div class="video-box default-border">
        <div class="video-player-box video-js">
          <div class="bp" v-if="videoid || video">
          <vue-core-video-player
            :src="videoid || video"
            :title="titles"
            logo="../assets/imgs/user-header.png"
            volume="0.5"
          />
          </div>
        </div>
      </div>

      <div class="video-userinfo default-border">
        <p class="userinfo-title">讲师</p>
        <div class="userinfo-head">
          <div class="user-body">
            <img src="../assets/imgs/user-header.png" alt=" " />
            <div class="user-name hary">
              <p>易学啦</p>
            </div>
          </div>
        </div>
        <p class="userinfo-title">课程须知</p>
        <div>
          <p>{{te}}</p>
        </div>
        <p class="userinfo-title">课程信息</p>
        <p>本套课程共{{sum}}节课，课程于2021-09-02发布,总时长约22时10分</p>
      </div>
    </div>
  </div>
</template>

<script>
import {getVideoJsonData,getRecommendList} from "../api/videots.js"
export default {
  props: {
    video: String,
    kiriton: Number,
    te: String,
    sum: Number,
  },
  data() {
    return {
      titles: null,
      videoid: null,
      RightVideos: null,
      videofun:null
    };
  },
  methods: {
    getVideo() {
      let ids = this.kiriton;
      getVideoJsonData({ id: ids }).then((data) => {
         this.videoid = data.data.video_sources[0].src
        console.log("this.videoid",this.videoid);
      });
      console.log("sum",this.sum);
    },
    getRightVideo() {
      // this.videoid = 1234;

      getRecommendList().then((data) => {
        console.log("data",data.data);
      });
    }
  },
  created() {
    this.getVideo()
    this.getRightVideo()
  },
  watch:{
    kiriton:function(){
      this.getVideo() 
    }
  }
};
</script>

<style lang="scss" scoped>
.course-video-body {
  display: flex;
  justify-content: space-between;
  margin-top: 14px;
  .video-box {
    width: 850px;
    height: 480px;
    background: hsla(0, 0%, 100%, 0.3);
    .video-player-box {
      width: 100%;
      height: 100%;
      background: transparent;
      border-radius: 6px;
    }
  }
  .video-userinfo {
    padding: 0 17px;
    background: #fff;
    width: 283px;
    .userinfo-title {
      margin: 30px 0 10px;
      font-size: 16px;
      font-weight: 600;
      color: #333;
    }
    .userinfo-head {
      margin-top: 20px;
    }
  }
}
.default-border {
  border-radius: 6px;
}
.video-js {
  display: block;
  box-sizing: border-box;
  color: #fff;
  background-color: #000;
  position: relative;
  padding: 0;
  font-size: 10px;
  line-height: 1;
  font-weight: 400;
}
.video {
  width: 100%;
  height: 100%;
  border-radius: 6px;
  overflow: hidden;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  img {
    width: 800;
    height: 300;
    display: block;
  }
}

.user-body {
  display: inline-flex;
  color: #fff;
  img {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    margin-right: 12px;
  }
  .user-name {
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    max-width: 150px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }
  .hary {
    p {
      color: #333;
    }
  }
}
</style>